<template>
  <form-drawer ref="formDrawerRef" title="编辑">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item v-for="item in configList" :key="item.value" :label="item.label" :prop="item.value">
        <template v-if="item.types === 'input'">
          <el-input v-model="form[item.value]" :placeholder="item.placeholder" :disabled="item.disabled" />
        </template>
        <template v-if="item.types === 'select'">
          <el-select filterable v-model="form[item.value]" :placeholder="item.placeholder" :disabled="item.disabled">
            <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </template>
        <template v-else-if="item.types === 'date'">
          <el-date-picker v-model="form[item.value]" :placeholder="item.placeholder" type="date"
            value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
        </template>
      </el-form-item>
    </el-form>
  </form-drawer>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
interface Option {
  value: string | number;
  label: string;
}
const configList = ref([
  {
    types: "input",
    label: "车牌号码",
    value: "licensePlate",
    placeholder: "请输入车牌号"
  },
  {
    types: "select",
    label: "车牌颜色",
    value: "carColor",
    placeholder: "请选择车牌颜色",
    options: [{
      label: "黄色",
      value: 1
    },{
      label: "蓝色",
      value: 2
    },{
      label: "绿色",
      value: 3
    },{
      label: "渐变绿",
      value: 4
    },{
      label: "黄绿双拼色",
      value: 5
    }] as Option[]
  },
  {
    types: "select",
    label: "车籍地",
    value: "carRegistration",
    placeholder: "请选择车籍地",
    options: [] as Option[]
  },
  {
    types: "select",
    label: "车辆类别",
    value: "carCategory",
    placeholder: "请选择车辆类别",
    options: [] as Option[]
  },
  {
    types: "select",
    label: "车辆类型",
    value: "carTypeEnums",
    placeholder: "请先选择车辆类别",
    disabled: true,
    options: [] as Option[]
  },
  {
    types: "select",
    label: "所属企业",
    value: "belongCompany",
    placeholder: "请选择所属企业",
    options: [] as Option[]
  },
  {
    types: "date",
    label: "上牌日期",
    value: "registrationTime",
    placeholder: "请选择受理时间",
  }
]);
const {formDrawerRef, formRef, form, rules, handleEdit } = useInitForm({
  form: {

  },
  rules: {
    licensePlate: [{ required: true, message: "请输入联系电话", trigger: "blur" }, {
      validator: (rule: any, value: string, callback: any) => {
        if (!/^1[3-9]\d{9}$|^0\d{2,3}-\d{7,8}$/.test(value)) {
          callback(new Error("请输入正确的号码,座机用-"));
        } else {
          callback();
        }
      }
    }]
  },
});
defineExpose({
  handleEdit
});
</script>
<style scoped lang="scss"></style>
